<template>
  <div
    :class="{
      'web-container': deviceType == 'web',
      'mobile-container': deviceType == 'mobile',
      'ipad-container': deviceType == 'ipad',
    }"
  >
    <div class="indexBanner">
      <el-image
        style="width: 100%; height: 100%"
        :src="bannerUrl"
        fit="cover"
      ></el-image>
    </div>
    <!-- 版心 -->
    <div class="pageArea">
      <div class="section">
        <!-- <div class="section_title">
        <div class="pageH1">實時新訊</div>
        <div class="more">查看全部 ></div>
      </div> -->
        <div class="section_content">
          <div class="news" v-if="deviceType == 'web' || deviceType == 'ipad'">
            <div
              class="newsItem"
              :style="{ backgroundImage: 'url(' + newsItem.newsUrl + ')' }"
              v-for="(newsItem, newsIndex) in newsList"
              :key="newsIndex"
            >
              <div class="cardTitle">{{ newsItem.title }}</div>
              <div class="box">
                <div class="newsArrow">
                  <i class="el-icon-right"></i>
                </div>
              </div>
            </div>
          </div>

          <!--实时新讯 轮播 -->
          <div class="swiper-container-news" v-if="deviceType == 'mobile'">
            <swiper :options="swiperoptionNews" ref="mySwiper">
              <swiper-slide
                v-for="(newsItem, newsIndex) in newsList"
                :key="newsIndex"
              >
                <div class="newsItem">
                  <el-image
                    style="width: 100%; height: 100%"
                    :src="newsItem.newsUrl"
                    fit="fill"
                  >
                  </el-image>
                  <div class="mesg">
                    <div class="cardTitle">{{ newsItem.title }}</div>
                    <div class="box">
                      <div class="newsArrow">
                        <i class="el-icon-right"></i>
                      </div>
                    </div>
                  </div>
                </div>
              </swiper-slide>
            </swiper>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
<script>
export default {
  name: "News",
  data() {
    return {
      bannerUrl: require("@/assets/images/index/banner.png"), //banner
      // 实时新讯
      //  实时新讯轮播
      swiperoptionNews: {
        slidesPerView: 2.5,
        spaceBetween: 16,
        mousewheelControl: true,
      },
      newsList: [
        {
          title: "祖先牌位",
          newsUrl: require("@/assets/images/index/news_01.png"),
        },
        {
          title: "祖先祭祀",
          newsUrl: require("@/assets/images/index/news_02.png"),
        },
        {
          title: "活動總覽",
          newsUrl: require("@/assets/images/index/news_03.png"),
        },
      ],
    };
  },
  methods: {},
};
</script>
  
<style lang="scss" scoped>
@import "~@/assets/viewCss/news/news.scss";
// .web-container {
//   .indexBanner {
//     width: 100%;
//     height: 560px;
//   }

//   .area {
//     width: 1600px;
//     margin: auto;

//     .spacing {
//       margin: 50px 0px 50px 0px;
//     }

//     .titleSpacing {
//       margin-bottom: 40px;
//       font-weight: bold;
//       font-size: 40px;
//       color: #202020;
//     }

//     // 實時新訊
//     .news {
//       .newsContainer {
//         display: flex;
//         justify-content: space-between;
//         .newsItem {
//           width: 507px;
//           height: 710px;
//           border-radius: 20px 20px 20px 20px;
//           position: relative;

//           .itemTitle {
//             display: flex;
//             align-items: center;
//             justify-content: center;
//             position: absolute;
//             top: 40px;
//             left: 40px;
//             width: 200px;
//             height: 60px;
//             background: rgba(255, 255, 255, 0.35);
//             border-radius: 33px 33px 33px 33px;

//             .titleName {
//               font-weight: bold;
//               font-size: 30px;
//               color: #ffffff;
//             }
//           }

//           .nextPage {
//             width: 50px;
//             height: 50px;
//             background: #ffffff;
//             border-radius: 50%;
//             text-align: center;
//             line-height: 50px;
//             cursor: pointer;
//             position: absolute;
//             bottom: 30px;
//             right: 40px;

//             .el-icon-right {
//               color: #000000;
//             }
//           }
//         }
//       }
//     }
//   }
// }
</style>